/**
 * ref 转发: React.forwardRef()
 *
 *    PS: 不能直接给一个函数组件标记 ref , 但有时我们希望获取到 函数组件内的某个元素，这时就可以通过 React.forwardRef() 来转发函数组件收到的 ref 到某个元素上。
 *
 *
 *    语法：
 *      const Component = React.forwardRef(render)
 *
 *      1. render 是一个返回 ReactNode 的函数
 *      2. render 函数会接受两个参数，分别是 props, ref
 *      3. 返回值是一个组件
 */

import React from "react";
import World, { Button } from "./components/World";

class App extends React.Component {
  abcd = React.createRef<HTMLParagraphElement>();

  fn1 = () => {
    // console.log(this.refs.abcd); // World div

    console.log(this.abcd.current);
  };

  render(): React.ReactNode {
    return (
      <div>
        <World ref={this.abcd} a="1" />
        <hr />
        <button onClick={this.fn1}>按钮1</button>
      </div>
    );
  }
}
export default App;
